<!--
 * @Author: 汪军 624473119@qq.com
 * @Date: 2023-10-22 13:13:43
 * @LastEditors: 汪军 624473119@qq.com
 * @LastEditTime: 2023-11-15 15:37:21
 * @FilePath: \app-formwork\src\pages\login\index.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template lang="pug">
view.merchant-detail
  view.banner
    image.img-size(:src="info.image")
  view.container.flex.column.px-32.py-32
    view.f-32-B.mb-24 {{ info.title }}
    view.address-text.flex.justify-between.mb-24
      view.flex.justify-start
        image.address(:src="Address")
        view.f-28 {{ info.address }}
      view.f-28.distanceinfo {{ info.distance }}
    view.info.px-24.py-20.f-28.mb-32
      view.flex.mb-24
        view.label 简介：
        view.flex1 {{ info.descript }}
      view.flex.mb-24
        view.label 电话：
        view.flex1 {{ info.mobile }}
      view.flex
        view.label 须知：
        view.flex1 {{ info.notice }}
    view.intro
      mp-html(:content="info.content")
</template>

<script setup>
import DiscoverBanner from "@/static/images/discover-banner.png";
import Address from "@/static/images/address.png";
import ProductIntro from "@/static/images/product-intro.png";
import { homeApi } from "../../api/home";

const info = ref();

onLoad((options) => {
  getShopListInfo(options);
});

const getShopListInfo = (options) => {
  homeApi
    .shopInfo({
      id: options.id,
      lat: options.lat,
      lon: options.lon
    })
    .then((res) => {
      info.value = res.data;
    });
};
</script>

<style lang="stylus" scoped>

.merchant-detail {
  .banner {
    image {
      width: 100%;
      height: 416rpx;
    }
  }

  .container {
    position: relative;
    margin-top: -40rpx;
    background: #ffffff;
    border-radius: 40rpx 40rpx 0rpx 0rpx;
    z-index: 1;

    .address {
      width: 60rpx;
      height: 40rpx;
      
    }

    .address-text {
      color: #306EFF;
    }

    .info {
      background: #F5F5F5;
      color: rgba(0, 0, 0, 0.6);
      border-radius: 24rpx;

      .label {
        width: 96rpx;
      }
    }

    .intro {
      image {
        height: 756rpx;
      }
    }
  }
}
</style>
